---
title: Simplifying complex features
description: Complex features can be simplified on the server for faster response times. Zoom in and watch as higher resolution vectors are loaded from the service. Hover over features for effects. More information about Feature Layers can be found in the <a href="../api-reference/layers/feature-layer.html">L.esri.FeatureLayer</a> documentation.
layout: example.hbs
---

<style>
  #info-pane {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 400;
    padding: 1em;
    background: white;
  }
</style>

<div id="map"></div>
<div id="info-pane" class="leaflet-bar"></div>

<script>
  var map = L.map('map').setView([37.75, -122.23], 9);

  L.esri.basemapLayer('Gray').addTo(map);

  var zipcodes = L.esri.featureLayer({
    url: 'https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0',
    simplifyFactor: 0.35,
    precision: 5,
    fields: ['FID', 'ZIP', 'PO_NAME'],
    style: {
      color: '#A9A9A9',
      weight: 1
    }
  }).addTo(map);

  var oldId;

  zipcodes.on('mouseout', function(e){
    document.getElementById('info-pane').innerHTML = 'Hover to Inspect';
    zipcodes.resetFeatureStyle(oldId);
  });

  zipcodes.on('mouseover', function(e){
    oldId = e.layer.feature.id;
    document.getElementById('info-pane').innerHTML = e.layer.feature.properties.ZIP + ' ' + e.layer.feature.properties.PO_NAME;
    zipcodes.setFeatureStyle(e.layer.feature.id, {
      color: '#9D78D2',
      weight: 3,
      opacity: 1
    });
  });
</script>
